import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: root
    color: "#0a0a0a"

    // 背景遮罩
    MouseArea {
        anchors.fill: parent
        onClicked: root.visible = false
    }

    // 详情面板
    Rectangle {
        anchors.centerIn: parent
        width: 800
        height: 600
        color: "#1a1a1a"
        border.color: "#333"
        border.width: 2
        radius: 15

        // 阻止点击穿透
        MouseArea {
            anchors.fill: parent
        }

        Column {
            anchors.fill: parent
            anchors.margins: 30
            spacing: 20

            // 标题栏
            Row {
                width: parent.width
                height: 50

                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "车辆详细信息"
                    color: "#00BCD4"
                    font.pixelSize: 24
                    font.bold: true
                }

                Item {
                    width: parent.width - 200
                    height: 1
                }

                Button {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "✕"
                    width: 40
                    height: 40
                    onClicked: root.visible = false

                    background: Rectangle {
                        radius: 20
                        color: "#f44336"
                    }

                    contentItem: Text {
                        text: parent.text
                        color: "white"
                        font.pixelSize: 16
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }

            // 主要数据展示区域
            Row {
                width: parent.width
                height: 400
                spacing: 40

                // 左侧列
                Column {
                    width: (parent.width - 40) / 2
                    height: parent.height
                    spacing: 20

                    // 驾驶信息组
                    Rectangle {
                        width: parent.width
                        height: 120
                        color: "#2a2a2a"
                        radius: 10
                        border.color: "#444"
                        border.width: 1

                        Column {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10

                            Text {
                                text: "驾驶信息"
                                color: "#00BCD4"
                                font.pixelSize: 16
                                font.bold: true
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "行程里程："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.tripDistance + " km"
                                    color: "#00BCD4"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "总里程："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.totalKm + " km"
                                    color: "#00BCD4"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }
                        }
                    }

                    // 发动机信息
                    Rectangle {
                        width: parent.width
                        height: 140
                        color: "#2a2a2a"
                        radius: 10
                        border.color: "#444"
                        border.width: 1

                        Column {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10

                            Text {
                                text: "发动机状态"
                                color: "#00BCD4"
                                font.pixelSize: 16
                                font.bold: true
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "机油寿命："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.oilLife + "%"
                                    color: carData.oilLife < 30 ? "#f44336" : "#4CAF50"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "水温："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.waterTemp + "°C"
                                    color: carData.waterTemp > 110 ? "#f44336" : "#4CAF50"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "发动机状态："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.engineRunning ? "运行中" : "关闭"
                                    color: carData.engineRunning ? "#4CAF50" : "#f44336"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }
                        }
                    }

                    // 安全系统
                    Rectangle {
                        width: parent.width
                        height: 100
                        color: "#2a2a2a"
                        radius: 10
                        border.color: "#444"
                        border.width: 1

                        Column {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10

                            Text {
                                text: "安全系统"
                                color: "#00BCD4"
                                font.pixelSize: 16
                                font.bold: true
                            }

                            Row {
                                width: parent.width
                                spacing: 20

                                Column {
                                    Text {
                                        text: "安全带"
                                        color: "#ccc"
                                        font.pixelSize: 12
                                    }
                                    Text {
                                        text: carData.seatbeltWarning ? "未系" : "已系"
                                        color: carData.seatbeltWarning ? "#f44336" : "#4CAF50"
                                        font.pixelSize: 12
                                        font.bold: true
                                    }
                                }

                                Column {
                                    Text {
                                        text: "手刹"
                                        color: "#ccc"
                                        font.pixelSize: 12
                                    }
                                    Text {
                                        text: carData.handbrakeOn ? "拉起" : "松开"
                                        color: carData.handbrakeOn ? "#FFC107" : "#4CAF50"
                                        font.pixelSize: 12
                                        font.bold: true
                                    }
                                }
                            }
                        }
                    }
                }

                // 右侧列
                Column {
                    width: (parent.width - 40) / 2
                    height: parent.height
                    spacing: 20

                    // 性能数据
                    Rectangle {
                        width: parent.width
                        height: 140
                        color: "#2a2a2a"
                        radius: 10
                        border.color: "#444"
                        border.width: 1

                        Column {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10

                            Text {
                                text: "性能数据"
                                color: "#00BCD4"
                                font.pixelSize: 16
                                font.bold: true
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "平均车速："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.avgSpeed.toFixed(1) + " km/h"
                                    color: "#00BCD4"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "平均油耗："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.avgFuelConsumption.toFixed(1) + " L/100km"
                                    color: "#00BCD4"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "当前转速："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.rpm + " rpm"
                                    color: carData.rpm > 5500 ? "#f44336" : "#00BCD4"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }
                        }
                    }

                    // 燃油信息
                    Rectangle {
                        width: parent.width
                        height: 120
                        color: "#2a2a2a"
                        radius: 10
                        border.color: "#444"
                        border.width: 1

                        Column {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10

                            Text {
                                text: "燃油信息"
                                color: "#00BCD4"
                                font.pixelSize: 16
                                font.bold: true
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "燃油余量："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.fuelLevel + "%"
                                    color: carData.fuelLevel < 20 ? "#f44336" : "#4CAF50"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "剩余续航："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.remainingKm + " km"
                                    color: carData.remainingKm < 50 ? "#f44336" : "#00BCD4"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }
                        }
                    }

                    // 环境信息
                    Rectangle {
                        width: parent.width
                        height: 120
                        color: "#2a2a2a"
                        radius: 10
                        border.color: "#444"
                        border.width: 1

                        Column {
                            anchors.fill: parent
                            anchors.margins: 15
                            spacing: 10

                            Text {
                                text: "环境信息"
                                color: "#00BCD4"
                                font.pixelSize: 16
                                font.bold: true
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "外部温度："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.outsideTemp.toFixed(1) + "°C"
                                    color: "#00BCD4"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }

                            Row {
                                width: parent.width
                                Text {
                                    text: "大灯状态："
                                    color: "#ccc"
                                    font.pixelSize: 14
                                }
                                Text {
                                    text: carData.headlightsOn ? "开启" : "关闭"
                                    color: carData.headlightsOn ? "#FFC107" : "#666"
                                    font.pixelSize: 14
                                    font.bold: true
                                }
                            }


                        }
                    }
                }
            }

            // 底部按钮
            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 20

                Button {
                    text: "重置行程数据"
                    onClicked: {
                        carData.resetTrip()
                        root.visible = false
                    }

                    background: Rectangle {
                        radius: 20
                        color: "#2196F3"
                    }

                    contentItem: Text {
                        text: parent.text
                        color: "white"
                        font.pixelSize: 14
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }

                Button {
                    text: "关闭"
                    onClicked: root.visible = false

                    background: Rectangle {
                        radius: 20
                        color: "#666"
                    }

                    contentItem: Text {
                        text: parent.text
                        color: "white"
                        font.pixelSize: 14
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
        }
    }
}
